<template>
  <div class="settings-phone">
    <settings-detail-template
      @save="saveSettings" 
      @click="handleHideLayer"
      :name="name">
      <div class="form-wrapper">
        <form class="form box-shadow">
          <input-item 
            class="login-pwd"
            :type="isPwdVisible ? 'text' : 'password'"
            :title="'登陆密码'" 
            :placeholder="'请输入登陆密码'"
            @input="updateValue"
            >
            <span class="icon-seen" :class="isPwdVisible ? 'active' : '' ">
              <i 
                class="iconfont" 
                @click="changeVisibility"
                :class="isPwdVisible ? 'iconpwd-visible' : 'iconpwd-hidden'">
              </i>
            </span>
          </input-item>
        </form>
      </div>
    </settings-detail-template>
  </div>
</template>
<script>
import SettingsDetailTemplate from './settings-detail-template'
import InputItem from '@/pages/login/components/input-item'
export default {
  components: {
    SettingsDetailTemplate,
    InputItem
  },
  data() {
    return {
      name: '登陆密码',
      loginPwd: '',
      errorMsg: '',
      isPwdVisible: false,
      saved : false
    }
  },
  methods: {
    updateValue(val) {
      this.loginPwd = val
    },
    saveSettings() {
      if (this.loginPwd == '') {
        this.errorMsg = '密码不能为空'
        return
      }
      else {
        this.saved = true
        this.$emit('pop',"保存成功")
        let data = {
          loginPwd: this.loginPwd
        }
        // console.log(data)
      }
    },
    handleHideLayer() {
      if(this.saved != false){
        this.$emit('click')
      }
      else{
        this.$emit('pop',"未修改")
        this.$emit('click')
      }
    },
    changeVisibility() {
      this.isPwdVisible = !this.isPwdVisible
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .settings-phone 
    .form-wrapper 
      box-sizing border-box 
      padding 10px
    .form 
      border-radius 3px
      background #fff
      border 1px solid $color-divide-line
      .icon-seen
        margin-left 15px
        color #cccdd0
        &.active 
          color $color-theme-red 
    .get-code 
      margin-left 10px 
      color $color-theme-dark
</style>